<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--

-->
<div id="app">
  <!--  1. .stop修饰符：用来阻止冒泡-->
  <div @click="divClick">aaaaaa
    <button @click.stop="btnClick">按钮</button> <!-- 不加.stop点击按钮，会打印btnClick和divClick，因为事件冒泡-->
  </div>
  
  <!-- 2.  .prevent修饰符：用来阻止默认事件-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick"> <!--点击提交按钮，默认会自动提交-->
  </form>
  
  <!-- 3.  .监听某个键盘的键帽-->
  <input type="text" @keyup.enter="keyUp" name="test"> <!--.enter 监听回车键-->
  
  <!-- 4.  .once修饰符：只触发一次回调-->
  <button @click.once="btn2Click">按钮2</button> <!-- 按钮按第二下就没反应了-->
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
    
    },
    methods:{
      btnClick(){
        console.log("btnClick");
      },
      divClick(){
        console.log("divClick");
      },
      submitClick(){
        console.log("submitClick");
      },
      keyUp(){
        console.log("keyUp");
      },
      btn2Click(){
        console.log("btn2Click");
      }
    }
  })
  
</script>
</body>
</html>